 import React, {Component} from 'react';
 import {Platform, StyleSheet ,View,Text,Image} from 'react-native';
 import {createBottomTabNavigator,createAppContainer} from 'react-navigation';

 import HomePage from './main/HomePage';
 import MinePage from './main/MinePage';
 import DetailPage from './main/DetailPage';

 import Colors from './res/Colors';

 const TabNavigator = createBottomTabNavigator(
 {
 	HomePage: { screen: HomePage },
 	MinePage: { screen: MinePage },
 	DetailPage: { screen: DetailPage },

 },
 {
 	defaultNavigationOptions: ({ navigation }) => ({
 		tabBarIcon: ({ focused, tintColor }) => {
 			const { routeName } = navigation.state;
 			let iconName;
 			if (routeName === 'HomePage') {
 				iconName = focused ? require('./res/images/home_select.png') : require('./res/images/home_def.png');
 			} else if (routeName === 'MinePage') {
 				iconName =  focused ? require('./res/images/mine_select.png') : require('./res/images/mine_def.png');
 			}else if (routeName === 'DetailPage') {
 				iconName =  focused ? require('./res/images/detail_select.png') : require('./res/images/detail_def.png');
 			}

	        // You can return any component that you like here! We usually use an
	        // icon component from react-native-vector-icons
        	return <Image style={{height:20, width:20}} source={iconName} />
    	},
	}),
 	tabBarOptions: {
 		activeTintColor: Colors.blue,
 		inactiveTintColor: 'gray',
 	},
 }


 );

 export default createAppContainer(TabNavigator);